<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../stylesheets_copy/q/better/font/iconfont.css">
		<link rel="stylesheet" href="../stylesheets/main.css" />
		<link rel="stylesheet" href="../stylesheets/root.css" />
		<title>完善界面new</title>
		<style>
			body{
				width: 100%;
				height: 100%;
			}
			.iconfont {
				font-family: "iconfont" !important;
				font-size: 3vmax;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
			.back{
				display: flex;
				flex-direction: column;
				width: 100%;
				margin-top: 1vh;
				position: relative;
			}
			.box{
				position: absolute;
				top:7vh;
				left: 10vw;
			}
			
			.text{
				font-size: 45px;
				margin-top: 10vh;
				}
			.imge{
				margin-top:3vh;
				width: 20vw;
				height: 20vw;
			}
			.take{
				align-self: flex-end;
			}
			.bot{
				display: flex;
				flex-direction: row;
			}
			
			
			.box02{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				margin-left: 10vw;
			}
			.name{
				    width: 120%;
					left: 10vw;
					top: 3vh;
					font-size: 2vmax;
					padding: 1.5vh;
					border: black solid 0.2vh;
					border-radius: 1vh;
					margin: 3vh 0;
			}
			.grade{
				font-size: 2vh;
				border: black solid 0.2vh;
				padding: 1vh;

			}
			.shool{
				margin-top: 5vh;
			    width: 150%;
				font-size: 2vmax;
				border: black solid 0.2vh;
				padding: 1vh;
				border-radius: 1vh;
			}
			.flex{
				margin-top: 5vh;
				margin-left: 20%;
				font-size: 2.2vh;
				color: #fff;
				border: black solid 0.1vb;
				background-color: black;
				width: 200%;
				height: 5vh;
				border-radius: 1vh;
			}
		</style>
	</head>
	<body>
		<div class="back">
			<img src="../images/q/better/b.png" alt="背景" class="back" />
			<div class="box">
				<div class="text">
					<p>我们还不太了解你呢<br>请完善一下资料吧！</p>
				</div>
				<div class="bot">
					<img src="../images/q/better/touxiang.png" alt="背景" class="imge"/>
					<span class="iconfont take">&#xe8c7;</span>
				</div>
			</div>
		</div>
		<div class="box02">
			<div>
				<input type="text" placeholder="请输入昵称" class="name">
			</div>
			<div>
				<div class="iconfont">&#xe661;&#xe647;&nbsp;
					<span class="grade">选择您的性别:
					<select  class="iconfont" style="font-size: 2.5vh;border: #fff solid 0.1vb;" name="gender" id="gender">
						<option>&nbsp;</option>
						<option>男</option>
						<option>女</option>
					</select>
					</span>
				</div>
			</div>
			<div>
				<label class="iconfont">
					<div class="shool">
						选择您的院校
						<span style="color: grey; float: right;" >请选择&#xe6c7;</span>
					</div>
				</label>
			</div>
	
			<div>
				<button class="flex">开启生活之旅</button>
			</div>
		</div>
	</body>
</html>